毎日1人に2000ポイントが当たる楽天ブログラッキーくじ
>>
人気記事ランキング
ブログを作成
楽天市場
965498
HOME
|
DIARY
|
PROFILE
【フォローする】
【ログイン】
GT-ONE 楽天タグ講座 パイプ奮闘記
壁紙の位置指定
初心者のためのHPの飾りつけ教室VOL.9
【更新2004/10/11 お詫び!】
2003/10/23 のタグ規制でここから下のタグは使えなくなりました。
onload=body.style. というタグが使えません。
ですから、BODY 内に命令が出せなくなりました。
楽天では使えませんが、参考のために残して起きます。
ご承知おき下さい。
■
【HPの飾りつけ教室VOL.9】
壁紙を上に!左に!右に!固定してみよう。
★ 壁紙でHPをセンスアップしよう! ★
前回は、
各ページに壁紙を指定する方法
をやりました。
壁紙は自動で
「リピート」
されて、ブラウザ画面全体に表示されます。
では、今回は壁紙を
「リピート」
させないようにして、
「一行表示」「一列表示」
をやってみましょう。
また、
「一枚だけ表示する」
事も出来ます。
一枚表示の背景、一行、一列表示の背景は普通に画像を並べても出来ます。
しかし、画像の上にはテキストは載せられません。
画像を背景画像にすれば、その上にテキストを載せる事が出来ます。
背景画像には、そういう利点があります。(^_-)-☆
では、前回のおさらいで壁紙を貼りつける、タグを書いてみましょう。
<IMG src="
~背景画像のURL~
" width="0" height="0" onload=body.style.background="url(
~背景画像のURL~
)">
という風になりますね。(*^^)v
↓下のブラウザもどきのテーブルに、一枚だけ背景画像を載せてみましょう。
ファイル 編集 表示 お気に入り ツール ヘルプ
-
□
×
↓このようにタグを書きますと、背景画像は左上に1枚だけ表示されます。
----------------------------------------------------------
<IMG src="
~背景画像のURL~
"onLoad=this.style.display="none";
body
.background=this.src;body.style.backgroundAttachment="fixed";
body
.style.backgroundRepeat="no-repeat">
----------------------------------------------------------
注:このタグをコピペで貼り付ける時は、
body
の前に、半角のスペースがいれてありますから、スペースを取り除いてください。(2箇所あります)
では、この背景画像の配置を変えてみましょう。
上のタグに位置(position)を命令するタグを追加します。
;body.style.backgroundPosition="
~位置~
"
「
~位置~
」の属性は、
top
ブラウザの上端中央
center
ブラウザの中央
bottom
ブラウザの下端中央
left
ブラウザの左端中央
right
ブラウザの右端中央
一つタグを書いてみましょう。「位置」を「center」にしてみましょう。
ファイル 編集 表示 お気に入り ツール ヘルプ
-
□
×
↓このようにタグを書きますと、背景画像は中央に1枚だけ表示されます。
----------------------------------------------------------
<IMG src="
~背景画像のURL~
"onLoad=this.style.display="none";
body
.background=this.src;body.style.backgroundAttachment="fixed";
body
.style.backgroundRepeat="no-repeat"
;body.style.backgroundPosition="
center
"
>
----------------------------------------------------------
注:このタグをコピペで貼り付ける時は、
body
の前に、半角のスペースがいれてありますから、スペースを取り除いてください。(2箇所あります)
このようになります。お判りでしょうか。
では次に、一行だけの表示、一列だけの表示をやってみましょう。
まずは、上に一行壁紙を貼りつけるためのタグです。
ファイル 編集 表示 お気に入り ツール ヘルプ
-
□
×
↓このようにタグを書きますと、
背景画像は一番上に一行だけ表示されます。
----------------------------------------------------------
<IMG src="
~背景画像のURL~
"onLoad=this.style.display="none";
body
.background=this.src;body.style.backgroundAttachment="fixed";
body
.style.backgroundRepeat="
repeat-x
";body.style.backgroundPosition="
top
">
----------------------------------------------------------
注:このタグをコピペで貼り付ける時は、
body
の前に、半角のスペースがいれてありますから、スペースを取り除いてください。(2箇所あります)
先ほどと違いますのは、
「リピート」
をさせない、タグ "no-repeat"の所に"
repeat-x
"を
入れている事です。
これは、
X軸方向(行方向)
だけ背景画像を
「リピート」
しなさいと命令を出しています。
;body.style.backgroundPosition="
~位置~
"
「
~位置~
」の属性は、
top
ブラウザの上端
center
ブラウザの中央
bottom
ブラウザの下端
位置の属性は↑このようになります。
今度は、左端一列に表示してみましょう。
"
repeat-x
"のところを"
repeat-y
"として、
Y軸方向(列方向)
だけ
背景画像を
「リピート」
しなさいと命令を出せばいいのです。
ファイル 編集 表示 お気に入り ツール ヘルプ
-
□
×
タグはこうなります。
<IMG src="
~背景画像のURL~
"onLoad=this.style.display="none";
body
.background=this.src;body.style.backgroundAttachment="fixed";
body
.style.backgroundRepeat="
repeat-y
";body.style.backgroundPosition="
lift
">
----------------------------------------------------------
注:このタグをコピペで貼り付ける時は、
body
の前に、半角のスペースがいれてありますから、スペースを取り除いてください。(2箇所あります)
;body.style.backgroundPosition="
~位置~
"
「
~位置~
」の属性は、
center
ブラウザの中央
left
ブラウザの左端
right
ブラウザの右端
ここぞというページは、背景を変えて、ページのセンスアップに挑戦してみてください。
しかし、背景が主体みたいなページにはしないように注意しましょうね。
あくまでも、テキストが主体です。
ではでは!【HPの飾りつけ】みなさんがんばってください。(*^_^*)
【飾りつけ教室 MENU】
にもどる。
ジャンル別一覧
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・TV
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
人気のクチコミテーマ
◆パチンコ◆スロット◆
たけのこご飯 & 大人のおみくじ屋…
(2024-05-01 04:20:05)
超合金
2024年7月発売予約商品! CCSTOYS 鉄…
(2024-04-07 00:00:10)
美術館・展覧会・ギャラリー
紋様彩集 展
(2024-05-01 00:00:21)
© Rakuten Group, Inc.